<template>
  <div class="mall-box">
    <div class="mui-segmented-control mh-segmented sub-control">
      <a class="mui-control-item" href="javascript:" @tap="handleExplore(1)"><span>搜索</span></a>
      <a class="mui-control-item" href="javascript:"  @tap="handleExplore(2)"><span>动态</span></a>
      <a class="mui-control-item" href="javascript:"  @tap="handleExplore(3)"><span>发现</span></a>
      <a class="mui-control-item mui-active" href="javascript:"  @tap="handleExplore(4)"><span>商城</span></a>
    </div>
    <div class="mall-nav">
      <nav class="mall-bar-nav flex">
        <a class="mui-tab-item" :class="{active: activeMallNav === 1}" href="javascript:" @tap="switchNav(1)">
          <img src="../../assets/images/ico/ic_e_flower.png" alt="图标">
          <p class="mui-tab-label">鲜花</p>
        </a>
        <a class="mui-tab-item" :class="{active: activeMallNav === 2}" href="javascript:" @tap="switchNav(2)">
          <img src="../../assets/images/ico/ic_e_diamond.png" alt="图标">
          <p class="mui-tab-label">珠宝</p>
        </a>
        <a class="mui-tab-item" :class="{active: activeMallNav === 3}" href="javascript:" @tap="switchNav(3)">
          <img src="../../assets/images/ico/ic_e_travel.png" alt="图标">
          <p class="mui-tab-label">旅游</p>
        </a>
        <a class="mui-tab-item" :class="{active: activeMallNav === 4}" href="javascript:" @tap="switchNav(4)">
          <img src="../../assets/images/ico/ic_e_giftmall.png" alt="图标">
          <p class="mui-tab-label">礼物商店</p>
        </a>
        <a class="mui-tab-item" :class="{active: activeMallNav === 5}" href="javascript:" @tap="switchNav(5)">
          <img src="../../assets/images/ico/ic_e_before.png" alt="图标">
          <p class="mui-tab-label">婚前服务</p>
        </a>
        <a class="mui-tab-item" :class="{active: activeMallNav === 6}" href="javascript:" @tap="switchNav(6)">
          <img src="../../assets/images/ico/ic_e_serv.png" alt="图标">
          <p class="mui-tab-label">相亲服务</p>
        </a>
      </nav>
    </div>
    <transition name="bounce" mode="out-in">
      <router-view ref='child'> </router-view>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "explore-mall",
    data () {
      return {
        activeMallNav: 1
      }
    },
    methods: {
      handleExplore (i) {
        switch (i) {
          case 1 :
            this.$router.replace({
              path: '/explore/search'
            });
            break;
          case 2:
            this.$router.replace({
              path: '/explore/dynamic'
            });
            break;
          case 3:
            this.$router.replace({
              path: '/explore/find'
            });
            break;
          case 4:
            this.$router.replace({
              path: '/explore/mall'
            });
            break;
          default:
            this.$router.replace({
              path: '/explore/search'
            });
        }
      },
      switchNav (i) {
        this.activeMallNav = i;
        switch (i) {
          case 5:
            this.$router.replace({
              path: '/explore/mall/marriage'
            });
            break;
          case 6:
            this.$router.replace({
              path: '/explore/mall/match'
            });
            break;
          default:
            this.$router.replace({
              path: '/explore/mall/goods'
            });
            this.$refs.child.getData(i)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .mall-bar-nav {
    background-color: #eb537f;
    a {
      flex: 1;
      padding: .2rem 0;
      text-align: center;
      p {@include sc(1rem, #fff);}
      img {height: 1.6rem;}
      &.active {background-color: #d74f76;}
    }
  }
</style>
